<template>
	<view style="background-color: #505F6F; padding-top: 20upx;">
		<view class="uni-padding-wrap uni-common-mt">


			<view class="uni-flex uni-row"
				style="-webkit-justify-content: flex-end;justify-content: flex-end; margin-right: 12upx;">

				<image mode="aspectFit" style="width: 228upx;height: 88upx;" src="/static/img/home/logo@2x.png" />
			</view>

			<view class="uni-flex uni-row">
				<view class="uni-flex uni-column" style="flex: 1;">
					<view style="margin-top: 31upx;">
						<text
							class="cls1">{{$utils.formatDateLocal(new Date(),'dddd D MMMM') ||"Tuesday 13 October" }}</text>
					</view>
					<view style="margin-top: 6upx;">
						<text class="cls2">{{firstName?'Hi ' + firstName : i18n.msg7 || 'Hi,Galenic'}} </text>
					</view>
				</view>

				<!-- 					<view class="uni-flex uni-row" style="flex: 1;">

						<image mode="aspectFit" style="width: 228upx;height: 88upx;" src="/static/img/home/logo@2x.png" />
					</view>
					<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end; margin-right: 12upx;">

						<image mode="aspectFit" style="width: 228upx;height: 88upx;" src="/static/img/home/logo@2x.png" />
					</view> -->
				<view class="uni-flex uni-row"
					style="justify-content: flex-end; margin-right: 15upx;margin-top: 29upx;margin-bottom: 29upx;">
					<!-- 					<view class="cls3 uni-flex uni-column" style="-webkit-flex: 1;flex: 1; -webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
						<image mode="aspectFit" src="/static/img/home/电量@2x.png" style="width: 50upx;height: 50upx;"></image>
						<view style="line-height: 0.8;">
							<text class="cls4">30%</text>
						</view>
					</view> -->
					<view
						style="display: flex;justify-content: center;position: relative;height: 200upx;overflow: hidden;">
						<cmd-circle cid="circle39" type="circle" :percent="electricityValue" :showInfo="false"
							:stroke-width="7" :width="86" stroke-shape="round" stroke-color="#63CBE6"
							stroke-background="#477BA0"></cmd-circle>
						<view style="position: absolute;text-align: center;top: 20%;">
							<image mode="aspectFit" src="/static/img/home/dianliang@2x.png"
								style="width: 50upx;height: 50upx;"></image>
							<view style="line-height: 0.1;">
								<text class="cls4">{{electricityValue>0?electricityValue +'%':'—'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="height: 31upx;"></view> -->
		</view>
		<view
			style="background: #FFFFFF;border-radius: 40upx 40upx 0upx 0upx; padding-top: 35upx; padding-bottom: 35upx; ">
			<view class="uni-flex uni-row">
				<uni-card class="cls7" @click="powerClick">
					<view class="cls8  uni-column"
						style="-webkit-justify-content: center;justify-content: center; flex: 1;margin-bottom: 20upx;"
						:style="{backgroundColor: powerEnable?'#DEDEDE':null}">
						<view>
							<image mode="aspectFit" src="/static/img/home/dianyuankaiguan@2x.png"
								style="width: 170upx;height: 170upx; "></image>

						</view>
					</view>

					<text class="cls6"> {{i18n.msg9 || 'POWER'}} </text>
				</uni-card>
				<uni-card class="cls7" @click="volumeClick">
					<view class="cls8  uni-column"
						style="-webkit-justify-content: center;justify-content: center; flex: 1;margin-bottom: 20upx;">
						<view>
							<image mode="aspectFit" src="/static/img/home/yinliang.png"
								style="width: 170upx;height: 170upx; "></image>

						</view>
					</view>
					<text class="cls6">{{i18n.msg12 || 'VOLUME'}} </text>
				</uni-card>
			</view>
			<view class="uni-flex uni-row">

				<uni-card class="cls7" @click='$nextRoute("/pages/list/listApp")'>
					<view class="cls8  uni-column"
						style="-webkit-justify-content: center;justify-content: center; flex: 1;">
						<view>
							<image mode="aspectFit" src="/static/img/home/huodongshezhi@2x.png"
								style="width: 170upx;height: 170upx; "></image>

						</view>
					</view>
					<text class="cls6">{{i18n.msg15|| 'ACTIVITY SETTINGS' }} </text>
				</uni-card>
				<uni-card class="cls7" @click='$nextRoute("/pages/index/setting/setting")'>
					<view class="cls8  uni-column"
						style="-webkit-justify-content: center;justify-content: center; flex: 1;">
						<view>
							<image mode="aspectFit" src="/static/img/home/xtsz.png"
								style="width: 170upx;height: 170upx; "></image>

						</view>
					</view>
					<text class="cls6">{{i18n.msg26 || 'GEN . SETTINGS' }} </text>
				</uni-card>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="popup-content"
				style="width: 444upx;height: 300upx;background-color: #ffffff;border-radius: 50upx;">
				<view style="text-align: center; padding-top: 60upx;">
					<image mode="aspectFit" :src="`/static/img/home/volume/v${volumeValue}.png`"
						style="width: 154upx;height: 65upx; "></image>

				</view>
				<view class="uni-flex  uni-row" style="padding-top: 50upx;">
					<view class="col16" @click="changeVOLUME(-1)">
						<image mode="aspectFit" src="/static/img/home/volume/sub.png"
							style="width: 40upx;height: 40upx; "></image>
					</view>
					<text style="font-size: 28upx;font-weight: bold;">{{volumeValue}}</text>
					<view class="col16" @click="changeVOLUME(1)">
						<image mode="aspectFit" src="/static/img/home/volume/add.png"
							style="width: 40upx;height: 40upx; "></image>

					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import cmdCircle from "../../components/lsz/cmd-circle/cmd-circle.vue"
	import uniCard from '../../components/lsz/uni-card/uni-card.vue'
	export default {
		data() {
			return {
				electricityValue: 0,
				volumeValue: 2,
				volumeHide: false,
				//关闭
				powerEnable: false,
				firstName: ''
			};
		},
		components: {
			cmdCircle,
			uniCard
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onLoad() {

		},
		onShow() {
			let val = this.getDataInfo(0);
			if (val >= 0 && val <= 100) {
				this.electricityValue = val;
			}
			this.firstName = uni.getStorageSync("list.firstName")
			// let joinTime = uni.getStorageSync("bluetooth.joinTime")
			// let time = uni.getStorageSync("index.power")
			// if (time && time === joinTime) {
			// 	this.powerEnable = true;
			// } else {
			// 	this.powerEnable = false;
			// }

			this.powerEnable = false;
		},

		methods: {
			genSettingsClick() {

			},
			getDataInfo(index) {
				let dataInfo = this.$utils.getDataInfo()
				if (dataInfo) {
					if (dataInfo.$INFO && dataInfo.$INFO.length > 2) {
						let val = dataInfo.$INFO[index]
						return Number(val);
					}
				}
				return -1;
			},
			volumeClick() {
				let val = this.getDataInfo(2);
				if (val >= 0 && val <= 5) {
					this.volumeValue = val
				}
				this.$refs.popup.open()
				this.volumeHideDo();
			},
			volumeHideDo() {
				setTimeout(() => {
					if (this.volumeHide) {
						this.volumeHide = false
						this.volumeHideDo();
					} else {
						this.$refs.popup.close()
					}
				}, 3333)
			},
			changeVOLUME(val) {
				let tmp = this.volumeValue + val;
				this.volumeHide = true;
				if (tmp < 0 || tmp > 5) {
					console.log("声音数值错误")
					return
				}
				this.volumeValue = tmp;

				this.$connection.sendStr(`$VOL:,${tmp};`);
			},
			powerClick() {
				this.$connection.sendStr("$STANDBY;", () => {
					this.powerEnable = true;
					let joinTime = uni.getStorageSync("bluetooth.joinTime")
					uni.setStorageSync("index.power", joinTime)

					setTimeout(() => {
						this.powerEnable = false;
					}, 2222)
				});
			}
		}
	};
</script>

<style scoped>
	.cls8 {
		display: flex;
		height: 308upx;
		width: 100%;
		background-color: #63CBE6;
		border-radius: 25rpx;

		margin-bottom: 10upx;
	}

	.cls7 {
		width: 154rpx;
		height: 404upx;
		background: #505F6F;
		opacity: 1;
		border-radius: 20px;
		text-align: center;
		display: flex;
	}

	.cls1 {
		font-size: 14px;
		font-family: SF Pro Display;
		font-weight: 400;
		line-height: 16px;
		color: #7098B4;
		opacity: 1;
	}

	.cls2 {

		font-size: 34px;
		font-family: SF Pro Display;
		font-weight: 400;
		line-height: 40px;
		color: #FFFFFF;
		opacity: 1;
	}

	.cls3 {
		width: 120upx;
		height: 120upx;
		border: 12upx solid #477BA0;
		border-radius: 50%;
		opacity: 1;
	}

	.cls4 {
		font-size: 30upx;
		font-family: SF Pro Display;
		font-weight: 300;
		color: #FFFFFF;
		opacity: 1;

	}



	.cls6 {
		font-size: 28upx;
		font-family: SF Pro Display;
		font-weight: 400;
		line-height: 22upx;
		color: #FFFFFF;
		opacity: 1;

	}
</style>
